<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图标字体</title>
    <link rel="stylesheet" href="fontawesome-free-5.15.3-web/css/all.css">
</head>
<body>
    <!-- 图标字体（iconfont）
         在网页中经常需要使用一些图标，可以通过图片来引入图标 但是图片大小本身背胶大，而且非常不灵活
         所以在使用图标时，我们还可以将图标直接设置为字体
            通过font-face的形式来对字体进行引入
            这样就能通过字体的形式使用图标
        使用步骤
         1、https://fontawesome.com/v5.15/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
         2、解压，将css和webfonts移动到项目中
         3、将all.css引入网页中
         5、使用图标字  
             直接通过类名来使用
            i标签 之前是标示一个斜体，现在可以用来表示图片字体
             class="fas fa-bell"
             class="fab fa-accessible-icon"


    -->
    <i class="fas fa-bell" style="font-size: 80px; color: red;"></i>
    <i class="fab fa-accessible-icon"></i>
</body>
</html>